<!DOCTYPE html>
<html lang="en">
<script src="123.js"></script>
<head>
    <meta charset="UTF-8">
    <title>入门</title>
</head>
<body>
  <div id="app">
      <!--区域，vue的组件-->
      <!--插值表达式-->
    {{message}}
      {{user}}<br/>
      {{user.username}}<br/>
      {{arr}}<br/>
      {{arr[0]}}<br/>
      <!--引用对象中的数据-->
      {{userList[1].username}}
      {{sayHello()}}
  </div>
</body>
<!--<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>-->
<script>
  /*js脚本  Vue名称是固定的*/
  new Vue({
    el:"#app",   //指定我们的Vue要管理的区域 el=
    data:{//模型数据
      message:"Vue的入门案例",
        user:{
            id:1,
            username:"张三",
            password:"123"
        },
        arr:["mybatis","spring","springmvc"],
        userList:[
            {
                id:1,
                username:"张三",
                password:"123"
            },
            {
                id:2,
                username:"张三",
                password:"123"
            }
        ]
    },
    methods:{//方法列表
        sayHello(){
            return "HelloWorld"
        },
        a:function (){

        }
    }
  });
</script>
</html>